<template>
	<view class="greyBox">
		<scroll-view :scroll-y="isScroll" scroll-with-animation="true" style="height: 100vh;">
			<view :class='toptipState == "error" ? "toptips error":"toptips"' v-if="toptipsMessage != ''">
				{{toptipsMessage}}
			</view>
			<view class="form">
				<u-form :model="form" ref="uForm" label-width="200">

					<view class="sortTitle">企业基本信息</view>
					<view class="fileUploadBox">
						<view class="fileUploadBlock">
							<view class="text">
								<view class="label">营业执照</view>
								<view class="subTitle">点击上传企业营业执照</view>
							</view>
							<u-upload :action="action" :custom-btn="true" @on-uploaded="contractUploadOver"
								:show-upload-list="ishowUploadList" ref="uUpload" name="uploadFiles">
								<view slot="addBtn" class="upload">
									<img :src='form.certificatePicPath == "" || form.certificatePicPath == null ?"https://supply.zhongyimotor.com/upload/applet/yingyezhizhao@3x.png":form.certificatePicPath'
										alt="" width="100%">
								</view>
							</u-upload>
						</view>
					</view>
					<view class="whiteBox">
						<u-form-item label="企业名称" prop="companyName" label-position="top" required>
							<view class="subTitle">
								输入企业全称，可自动带出以下企业信息
							</view>
							<u-input required v-model="form.companyName" placeholder="请输入企业名称" class="name"
								@focus="onFocus" @blur="onBlur" />
							<view slot="right" class="search">
								<u-button type="success" size="mini" shape="circle" @click="getCompanyInfo"
									:disabled="form.companyName.length > 4 ? false : true ">查询</u-button>
							</view>
						</u-form-item>
					</view>
					<view class="grey"></view>
					<u-form-item label="法人" prop="legalPerson" required>
						<u-input v-model="form.legalPerson" placeholder="请输入法人姓名" @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="企业类型" prop="companyType" right-icon="arrow-right" required>
						<u-input required v-model="form.companyType" placeholder="请输入企业类型" :disabled="true"
							@click="enterpriseTypeShow = true" @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="统一社会信用代码" prop="creditNo" required label-width="300">
						<u-input v-model="form.creditNo" placeholder="请输入统一社会信用代码" :border-bottom="false"
							@focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<view class="grey"></view>
					<u-form-item label="联系方式" prop="mobile" required>
						<u-input v-model="form.mobile" placeholder="请输入手机号" @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="邮箱" prop="email" required>
						<u-input v-model="form.email" placeholder="请输入联系邮箱" @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="地址" prop="companyAddress" required>
						<u-input v-model="form.companyAddress" placeholder="请输入详细地址" type="textarea" :auto-height="true"
							:custom-style='{"min-height":"38rpx"}' @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="注册资本" prop="capital" required>
						<u-input required v-model="form.capital" placeholder="请输入" @focus="onFocus" @blur="onBlur" />
						<view slot="right" class="unit">
							万元
						</view>
					</u-form-item>
					<u-form-item label="成立日期" prop="establishDate" right-icon="arrow-right" required>
						<u-input required v-model="form.establishDate" disabled="true" @click="dateShow = true"
							placeholder="请选择" @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<u-form-item label="经营范围" prop="businessScope" :label-style='{"display":"inline"}' required
						:border-bottom="false">
						<u-input v-model="form.businessScope" type="textarea" placeholder="请填写经营范围" :auto-height="true"
							:custom-style='{"min-height":"38rpx"}' @focus="onFocus" @blur="onBlur" />
					</u-form-item>
					<view class="sortTitle">印章样本</view>
					<view class="fileUploadBox">
						<view class="fileUploadBlock">
							<view class="text">
								<view class="label">公司章模</view>
								<view class="subTitle">点击上传公司章模照片</view>
							</view>
							<u-upload :action="action" :custom-btn="true" @on-uploaded="surnameUploadOver"
								:show-upload-list="ishowUploadList" ref="surnameUpload" name="uploadFiles">
								<view slot="addBtn" class="upload">
									<img :src='form.surname == "" || form.surname == null ?"https://supply.zhongyimotor.com/upload/applet/upload@3x.png":form.surname'
										alt="" width="100%">
								</view>
							</u-upload>
						</view>
					</view>
					<view class="fileUploadBox">
						<view class="fileUploadBlock">
							<view class="text">
								<view class="label">授权委托人签字</view>
								<view class="subTitle">点击上传授权委托人签字照片</view>
							</view>
							<u-upload :action="action" :custom-btn="true" @on-uploaded="signaturePrincipalUploadOver"
								:show-upload-list="ishowUploadList" ref="signaturePrincipalUpload" name="uploadFiles">
								<view slot="addBtn" class="upload">
									<img :src='form.signaturePrincipal == "" || form.signaturePrincipal == null ?"https://supply.zhongyimotor.com/upload/applet/upload@3x.png":form.signaturePrincipal'
										alt="" width="100%">
								</view>
							</u-upload>
						</view>
					</view>
					<view class="fileUploadBox">
						<view class="fileUploadBlock">
							<view class="text">
								<view class="label">法定代表人人名章章模</view>
								<view class="subTitle">点击上传法定代表人人名章章模照片</view>
							</view>
							<u-upload :action="action" :custom-btn="true" @on-uploaded="legalSurnameUploadOver"
								:show-upload-list="ishowUploadList" ref="legalSurnameUpload" name="uploadFiles">
								<view slot="addBtn" class="upload">
									<img :src='form.legalSurname == "" || form.legalSurname == null ?"https://supply.zhongyimotor.com/upload/applet/upload@3x.png":form.legalSurname'
										alt="" width="100%">
								</view>
							</u-upload>
						</view>
					</view>
				</u-form>

			</view>
			<view class="actions">
				<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="submit">申请认证</u-button>
			</view>
			<u-calendar v-model="dateShow" mode="date" toolTip="请选择企业成立日期" @change="dateConfirm"></u-calendar>

			<u-select v-model="enterpriseTypeShow" :list="enterpriseTypeList"
				@confirm="enterpriseTypeConfirm"></u-select>

			<u-toast ref="uToast" />
			<u-no-network></u-no-network>
		</scroll-view>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	import moment from "moment"
	import citys from '../../static/citydata.js'
	import cCard from '../creditGranting/components/c-card/index.vue'
	export default {
		components: {
			cCard
		},
		data() {
			return {
				buttonStyle,
				showUploadList: [],
				legalSurnameUploadList: [],
				surnameUploadList: [],
				signaturePrincipalUploadList: [],
				ishowUploadList: false,
				toptipState: "warning",
				toptipsMessage: "",
				action: "",
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				isScroll: true,
				dearlerId: "",
				dateShow: false,
				enterpriseTypeShow: false,
				cityList: citys,
				form: {
					companyName: "",
					legalPerson: "",
					companyType: "",
					addressArea: "",
					companyAddress: "",
					businessScope: "",
					capital: "",
					establishDate: "",
					certificatePicPath: "",
					creditNo: "",
					surname: "",
					legalSurname: "",
					signaturePrincipal: ""
				},
				enterpriseTypeList: [{
					value: "有限责任公司",
					label: "有限责任公司"
				}, {
					value: "股份有限公司",
					label: "股份有限公司"
				}, {
					value: "国有独资公司",
					label: "国有独资公司"
				}, {
					value: "上市公司",
					label: "上市公司"
				}, {
					value: "外商投资公司",
					label: "外商投资公司"
				}],
				rules: {
					name: [{
						required: true,
						message: '请输入企业名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					legal: [{
						required: true,
						message: '请输入法人姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					type: [{
						required: true,
						message: '请输入企业类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: ['change', 'blur'],
					}],
					addressDetails: [{
						required: true,
						message: '请输入详细地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					capital: [{
						required: true,
						message: '请输入注册资本',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					establishDate: [{
						required: true,
						message: '请填写成立日期',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					businessScope: [{
						required: true,
						message: '请填写经营范围',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入联系电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				mode: "new"
			}
		},
		onLoad(option) {
			if (option.id) {
				this.dearlerId = option.id
				this.form = uni.getStorageSync("sellerInfo")
				this.form.establishDate = moment(this.form.establishDate).format('YYYY-MM-DD')
			}
			if (option.mode) {
				this.mode = option.mode
			}
			if (option.remark) {
				this.toptipsMessage = "驳回原因:" + option.remark
				this.toptipState = 'error'
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.action = this.$config.uploadFilesUrl
		},
		methods: {
			onFocus() {
				this.isScroll = false
			},
			onBlur() {
				this.isScroll = true
			},
			legalSurnameUploadOver(lists, name) {
				this.$refs.legalSurnameUpload.clear();
				this.legalSurnameUploadList = []
				lists.forEach((item, inde) => {
					this.legalSurnameUploadList.push(item.response.result[0])
				})
				this.form.legalSurname = lists[lists.length - 1].response.result[0].url;
			},
			signaturePrincipalUploadOver(lists, name) {
				this.$refs.signaturePrincipalUpload.clear();
				this.signaturePrincipalUploadList = []
				lists.forEach((item, inde) => {
					this.signaturePrincipalUploadList.push(item.response.result[0])
				})
				this.form.signaturePrincipal = lists[lists.length - 1].response.result[0].url;
			},
			surnameUploadOver(lists, name) {
				this.$refs.surnameUpload.clear();
				this.surnameUploadList = []
				lists.forEach((item, inde) => {
					this.surnameUploadList.push(item.response.result[0])
				})
				this.form.surname = lists[lists.length - 1].response.result[0].url;
			},
			contractUploadOver(lists, name) {
				this.$refs.uUpload.clear()
				this.showUploadList = []
				lists.forEach((item, inde) => {
					this.showUploadList.push(item.response.result[0])
				})
				this.form.certificatePicPath = lists[lists.length - 1].response.result[0].url
			},
			getCompanyInfo() {
				let that = this;
				if (that.form.name == "") {
					return false
				}
				let params = {
					keyword: that.form.companyName
				}
				that.$api.getCompanyInfo(params).then((res) => {
					that.form = res.result
					that.form.establishDate = moment(that.form.establishDate).format('YYYY-MM-DD');
					that.form.surname = that.surnameUploadList.length == 0 ? "" : that.showUploadList[0]
						.url;
					that.form.legalSurname = that.legalSurnameUploadList.length == 0 ? "" : that.showUploadList[0]
						.url;
					that.form.signaturePrincipal = that.signaturePrincipalUploadList.length == 0 ? "" : that
						.showUploadList[0]
						.url;
					that.form.certificatePicPath = that.showUploadList.length == 0 ? "" : that.showUploadList[0]
						.url
				})
			},
			dateConfirm(e) {
				this.form.establishDate = e.result
			},
			enterpriseTypeConfirm(e) {
				this.form.companyType = e[0].value
			},
			async submit() {
				let that = this
				if (that.form.certificatePicPath == "" || that.form.certificatePicPath == null) {
					uni.showToast({
						title: '请上传营业执照照片',
						icon: "none",
					})
					return false
				}
				that.$refs.uForm.validate(async valid => {
					if (valid) {
						let params = {
							"mobile": that.form.mobile,
							"email": that.form.email,
							"addressDetails": that.form.companyAddress,
							"businessScope": that.form.businessScope,
							"establishDate": that.form.establishDate,
							"legal": that.form.legalPerson,
							"name": that.form.companyName,
							"registerCapital": that.form.capital,
							"type": that.form.companyType,
							"certificatePicPath": that.form.certificatePicPath,
							sellerDetail: {
								"surname": that.form.surname,
								"legalSurname": that.form.legalSurname,
								"signaturePrincipal": that.form.signaturePrincipal,
							},
							"creditno": that.form.creditNo
						}
						params = JSON.parse(JSON.stringify(params));
						console.log(params)
						if (that.dearlerId != "" || that.mode == "update") {
							params.id = that.dearlerId
							await that.$api.reAttestation(params)
						} else {
							await that.$api.attestation(params)
						}

						uni.showToast({
							title: '认证信息已提交',
							icon: "success",
							duration: 2000,
							success: () => {
								setTimeout(function() {
									uni.switchTab({
										url: `/pages/mine/index`
									})
								}, 2000)
							}
						})
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.form {


		.whiteBox {
			padding-bottom: 32rpx;
			background: #FFF;

			.search {
				/deep/button {
					width: 88rpx !important;
					height: 42rpx !important;
					margin-top: 40rpx;
				}
			}

			.subTitle {
				height: 36rpx;
				font-size: 26rpx;
				color: #888888;
				line-height: 36rpx;
				margin-top: -8rpx;
			}

			/deep/.u-border-bottom:after,
			.u-border-left:after,
			.u-border-right:after,
			.u-border-top-bottom:after,
			.u-border-top:after,
			.u-border:after {
				left: 32rpx !important;
				width: 184% !important;
				border: 0;
				border-bottom: 2rpx solid #B0CEFB !important;
			}

			/deep/.u-input__input {
				line-height: 44rpx !important;
			}

			/deep/.u-form-item {
				padding: 20rpx 30rpx 12rpx;
			}
		}

		/deep/.u-border-bottom:after,
		.u-border-left:after,
		.u-border-right:after,
		.u-border-top-bottom:after,
		.u-border-top:after,
		.u-border:after {
			left: 32rpx !important;
		}

		.unit {
			color: #333333;
		}

		/deep/.u-form-item {
			padding-left: 30rpx !important;
			padding-right: 30rpx !important;
			background: #FFF;
			font-size: 34rpx;
		}

		/deep/.u-form-item--left__content {
			padding-left: 10rpx;
		}

		/deep/.u-form-item--left {
			display: inline;
		}

		// /deep/.u-form-item--right__content__slot {
		// 	display: flex;

		// 	u-input {
		// 		margin-right: auto;
		// 	}
		// }

	}

	.actions {
		width: 670rpx;
		margin: 60rpx auto;
	}

	.sortTitle {
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-bottom: 20rpx;
		font-size: 26rpx;
		color: #969696;
	}
</style>